<template>
  <component :is="tag" :style="styleProps" class="h-text-component" @click="handleClick">
    {{ text }}
  </component>
</template>

<script lang="ts">
import { transformToComponentProps, textDefaultProps, textStylePropNames } from '@/defaultProps'
const defaultProps = transformToComponentProps(textDefaultProps)
export default {
  name: 'HText'
}
</script>

<script lang="ts" setup>
import useComponentCommon from '@/hooks/useComponentCommon'

const props = defineProps({
  tag: {
    type: String,
    default: 'div'
  },
  ...defaultProps
})
const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames)
</script>
<style lang="scss" scoped>
h2.h-text-component,
p.h-text-component {
  margin-bottom: 0;
}
button.h-text-component {
  padding: 5px 10px;
  cursor: pointer;
}
.h-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  position: relative !important;
}
</style>
